import React, { useState, useEffect, ReactNode } from 'react';
import { Button } from 'antd';
import ReactDOM from 'react-dom';
import { CloseCircleFilled } from '@ant-design/icons';
import './index.less';
type contextStruct = string | ReactNode | undefined;
type propsStruct = {
  title: contextStruct;
  content: contextStruct;
  buttons: contextStruct[];
  visible: boolean;
  args: any[];
};

function Dialog(props: propsStruct) {
  const [dialogVisible, setDialogVisible] = useState(false);
  useEffect(() => {
    setDialogVisible(props.visible);
  }, [props.visible]);

  const { title, content, buttons } = props;
  const btns: contextStruct = buttons || [
    <Button type="primary" style={{ marginRight: '20px' }} key="confirm">
      确定
    </Button>,
    <Button key="cancel">取消</Button>,
  ];
  const handleClick = (): void => {
    setDialogVisible(false);
    setTimeout(() => {
      console.log(dialogVisible);
    });
  };
  return (
    <div
      className="dialog-frame"
      style={{ display: dialogVisible ? 'block' : 'none' }}
    >
      <div className="dialog-container">
        <header>
          {title}{' '}
          <CloseCircleFilled
            style={{ color: 'skyblue' }}
            onClick={handleClick}
          />
        </header>
        <main>{content}</main>
        <footer>{btns}</footer>
      </div>
    </div>
  );
}

export default Dialog;
